import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/pages/mine/using_help/using_help_controller.dart';
import 'package:flutter_changdian_football/widget/default_page/custom_empty.dart';
import 'package:flutter_changdian_football/widget/load_state/load_state_layout.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:get/get.dart';

/// 使用帮助
class UsingHelpPage extends StatelessWidget {
  const UsingHelpPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: const Color(0xffF8FAF9),
        elevation: 0,
        title: Text(
          '使用帮助',
          style: TextStyle(fontSize: 16.sp, color: const Color(0xff333333)),
        ),
        iconTheme: const IconThemeData(
          color:  Color(0xff333333)
        ),
      ),
      body: GetBuilder<UsingHelpController>(
        init: UsingHelpController(),
        builder: (usingHelpController) {
          return LoadStateLayout(
            state: usingHelpController.state,
            empty: const CustomEmpty(
              text: '暂无使用帮助',
            ),
            success: ListView.separated(
              itemCount: usingHelpController.helpList.length,
              padding: EdgeInsets.symmetric(horizontal: 17.w),
              physics: const BouncingScrollPhysics(),
              separatorBuilder: (context, index) {
                return Container(
                  width: double.infinity,
                  height: 0.5.w,
                  color: const Color(0xffE5E5E5),
                );
              },
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  onTap: () {
                    usingHelpController.changeIsShow(index);
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 14.w),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              margin: EdgeInsets.only(top: 2.5.w),
                              width: 3.w,
                              height: 14.w,
                              color: const Color(0xff499360 ),
                            ),
                            SizedBox(width: 8.w,),
                            Expanded(// 499360
                              child: Text(
                                usingHelpController.helpList[index].question ?? '', 
                                style: TextStyle(
                                  fontSize: 15.sp, 
                                  color: usingHelpController.helpList[index].isShow == true ? const Color(0xff499360) : const Color(0xff333333), 
                                  fontWeight: FontWeight.w500
                                )
                              ),
                            ),

                            SizedBox(width: 10.w,),

                            // Container(
                            //   margin: EdgeInsets.only(top: 5.5.w),
                            //   width: 10.w,
                            //   height: 10.w,
                            //   child: Image.asset('assets/images/icon_arrow_grey_right.png'),
                            // )

                            if (usingHelpController.helpList[index].isShow == true) ...[
                              Transform.rotate(
                                angle: pi / 2,
                                child: Container(
                                  margin: EdgeInsets.only(top: 5.5.w),
                                  width: 10.w,
                                  height: 10.w,
                                  child: Image.asset('assets/images/icon_arrow_grey_right.png'),
                                ),
                              )
                            ] else ...[
                              Container(
                                margin: EdgeInsets.only(top: 5.5.w),
                                width: 10.w,
                                height: 10.w,
                                child: Image.asset('assets/images/icon_arrow_grey_right.png'),
                              )
                            ]
                          ],
                        ),
                      ),
                      
                      if (usingHelpController.helpList[index].isShow == true) ...[
                        Container(
                          margin: EdgeInsets.only(top: 2.w, bottom: 14.w),
                          child: Text('        ${usingHelpController.helpList[index].answer ?? ''}', style: TextStyle(fontSize: 12.sp, color: const Color(0xff999999), height: 1.8.w),),
                        )
                      ]
                    ],
                  ),
                );
              },
            ),
          );
        }
      ),
    );
  }
}